import { Button, Select } from 'antd';
import React, { useState, useEffect } from 'react';
import styles from './index.less';
const handleChange = (value: string) => {
  console.log(`selected ${value}`);
};

function PersonnelFile() {
  const [userMessage, setMessage] = useState(
    JSON.parse(sessionStorage.getItem('userMessage')),
  ); //登录之后的用户信息

  return (
    <div className={styles.PersonnelFile}>
      <div className={styles.top}>
        <Button>草稿箱</Button>
        <Button>导入</Button>
        <Select
          defaultValue="打印"
          style={{ width: 80, marginRight: '1vw', backgroundColor: '#eaf4ff' }}
          onChange={handleChange}
          options={[
            { value: '打印设置', label: '打印设置' },
            { value: '打印单据', label: '打印单据' },
          ]}
        />
        <Button>查看日志</Button>
      </div>
      <div className={styles.bottom}>
        <div className={styles.bottom_con}>
          <p>人员档案</p>
          <table>
            <tbody>
              <tr>
                <td
                  colSpan={11}
                  style={{ background: 'linear-gradient(#e6eefb, #f7fbff)' }}
                >
                  基本信息
                </td>
              </tr>
              <tr>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  档案编号：
                </td>
                <td colSpan={3}>RYDA0001</td>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  登录账号：
                </td>
                <td colSpan={3}>{userMessage.username}</td>
                <td rowSpan={11}>证件照-宽200px,高215px</td>
                <td colSpan={2} rowSpan={11}>
                  <img
                    style={{
                      width: '250px',
                      height: '350px',
                      // marginTop: '10px',
                      marginLeft: '100px',
                      // marginRight: '50px',
                    }}
                    src={`http://127.0.0.1:7777/${userMessage.imgpath}`}
                    alt=""
                  />
                </td>
              </tr>
              <tr>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  <span style={{ color: 'red' }}>*</span> 真实姓名：
                </td>
                <td colSpan={3}>{userMessage.username}</td>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  性别：
                </td>
                <td colSpan={3}>男</td>
              </tr>
              <tr>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  出生日期：
                </td>
                <td colSpan={3}>2018-01-16</td>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  身份证号码：
                </td>
                <td colSpan={3}>511621198501206376</td>
              </tr>
              <tr>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  政治面貌：
                </td>
                <td colSpan={3}>群众</td>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  婚姻状况：
                </td>
                <td colSpan={3}>未婚</td>
              </tr>
              <tr>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  国籍：
                </td>
                <td colSpan={3}></td>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  籍贯：
                </td>
                <td colSpan={3}></td>
              </tr>
              <tr>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  民族：
                </td>
                <td colSpan={3}>汉族</td>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  户口性质：
                </td>
                <td colSpan={3}>城镇户口</td>
              </tr>
              <tr>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  <span style={{ color: 'red' }}>*</span>联系电话：
                </td>
                <td colSpan={3}>15123903897</td>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  电子邮箱：
                </td>
                <td colSpan={3}>1183849539@qq.com</td>
              </tr>
              <tr>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  微信号：
                </td>
                <td colSpan={3}></td>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  QQ号：
                </td>
                <td colSpan={3}></td>
              </tr>
              <tr>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  紧急联系人：
                </td>
                <td colSpan={3}></td>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  紧急联系人电话：
                </td>
                <td colSpan={3}></td>
              </tr>
              <tr>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  户口地址：
                </td>
                <td colSpan={7}></td>
              </tr>
              <tr>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  家庭住址：
                </td>
                <td colSpan={7} style={{ color: '#545454' }}>
                  重庆市沙坪坝歌乐山
                </td>
              </tr>
              <tr>
                <td
                  rowSpan={2}
                  style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}
                >
                  提示：
                </td>
                <td rowSpan={2} colSpan={10}>
                  1,新建用户时，系统会自动创建对应的档案信息，然后在人员档案列表里选择档案进行资料完善；
                  <br />
                  2，只需要录入人员档案信息，不需要给他创建系统登录账号时，才在这里新建，注意不要重复创建。
                </td>
              </tr>
            </tbody>
          </table>
          <table>
            <tbody>
              <tr>
                <td
                  colSpan={12}
                  style={{ background: 'linear-gradient(#e6eefb, #f7fbff)' }}
                >
                  入职信息
                </td>
              </tr>
              <tr>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  入职时间：
                </td>
                <td colSpan={3}>2018-01-16</td>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  转正日期：
                </td>
                <td colSpan={3}></td>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  离职时间：
                </td>
                <td colSpan={3}></td>
              </tr>
              <tr>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  所在部门：
                </td>
                <td colSpan={3}>总经办</td>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  所在岗位：
                </td>
                <td colSpan={3}>总经理</td>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  <span style={{ color: 'red' }}>*</span>直接上级：
                </td>
                <td colSpan={3}>胡建</td>
              </tr>
              <tr>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  银行开户行：
                </td>
                <td colSpan={3}></td>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  开户名：
                </td>
                <td colSpan={3}></td>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  银行卡号：
                </td>
                <td colSpan={3}></td>
              </tr>
              <tr>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  社保卡号：
                </td>
                <td colSpan={3}>513021199611162847</td>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  公积金号：
                </td>
                <td colSpan={3}></td>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  工作排班：
                </td>
                <td colSpan={3}>正常班</td>
              </tr>
              <tr>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  职称等级：
                </td>
                <td colSpan={3}>初级职称</td>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  员工类型：
                </td>
                <td colSpan={3}>全职</td>
                <td style={{ textAlign: 'right', backgroundColor: '#f9fcff' }}>
                  员工状态：
                </td>
                <td colSpan={3}>正式</td>
              </tr>
            </tbody>
          </table>
          <table>
            <tbody>
              <tr>
                <td
                  colSpan={16}
                  style={{ background: 'linear-gradient(#e6eefb, #f7fbff)' }}
                >
                  教育经历<Button>导出</Button>
                </td>
              </tr>
              <tr>
                <td>序号</td>
                <td colSpan={3}>开始时间</td>
                <td colSpan={3}>结束时间</td>
                <td colSpan={3}>学校名称</td>
                <td colSpan={3}>专业</td>
                <td colSpan={3}>学历</td>
              </tr>
              <tr>
                <td colSpan={16}></td>
              </tr>
              <tr>
                <td colSpan={16}></td>
              </tr>
            </tbody>
          </table>
          <table>
            <tbody>
              <tr>
                <td
                  colSpan={19}
                  style={{ background: 'linear-gradient(#e6eefb, #f7fbff)' }}
                >
                  工作经历<Button>导出</Button>
                </td>
              </tr>
              <tr>
                <td>序号</td>
                <td colSpan={3}>开始时间</td>
                <td colSpan={3}>结束时间</td>
                <td colSpan={3}>工作单位</td>
                <td colSpan={3}>所在部门</td>
                <td colSpan={3}>工作内容</td>
                <td colSpan={3}>离职原因</td>
              </tr>
              <tr>
                <td colSpan={19}></td>
              </tr>
              <tr>
                <td colSpan={19}></td>
              </tr>
            </tbody>
          </table>
          <table>
            <tbody>
              <tr>
                <td
                  colSpan={16}
                  style={{ background: 'linear-gradient(#e6eefb, #f7fbff)' }}
                >
                  简历上传
                </td>
              </tr>
              <tr>
                <td colSpan={9}>文件名称</td>
                <td>文件大小</td>
                <td>上传人</td>
                <td>上传时间</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
              <tr>
                <td colSpan={16}></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

export default PersonnelFile;
